<script setup>
import {reactive} from 'vue'
import useUserStore from '../stores/user'
import { getInfoApi } from "../util/requests"
// import { storeToRefs } from 'pinia' //使得仓库数据变为响应式


const userStore = useUserStore()
// let singerInfor = storeToRefs(userStore.singerInfor)
const data = reactive({
    singerInfor: userStore.singerInfor    
})


// 写法一
// const quest = () => {
//     getInfoApi().then(res => {
//         console.log(res);
//         console.log(res.data);
//         singerInfor = res.data
//     })
//     //此处可以证明 请求接口是异步的，因为打印的时候，是先打印下方的成功，而不是接口中的数据
// }


// 写法二：
async function quest(){
    let p = await getInfoApi().then(res => {
        // console.log(res);
        // console.log(res.data);

        // 接收获取的歌手信息，并且赋值给 pinia 仓库
        userStore.singerInfor = res.data
        data.singerInfor = res.data
    })
    // 通过 async、await 可以使得上面请求完成后再执行下方的代码
    console.log(userStore.singerInfor);
    // console.log(data.singerInfor);
}


</script>

<template>
    <button @click="quest">请求</button>
    
    <table width="90%" class="table">
        <caption>
            <h2>歌手信息</h2>
        </caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>国籍</th>
                <th>身份</th>                
            </tr>
        </thead>        
        <!-- <tr v-for="(item,index) in userStore.singerInfor" :key="index">         -->
        <tr v-for="(item,index) in data.singerInfor" :key="index">        
        <!-- <tr v-for="(item,index) in singerInfor" :key="index">         -->
            <td>{{ item.name }}</td>
            <td>{{ item.sex }}</td>
            <td>{{ item.nationality }}</td>
            <td>{{ item.occupation }}</td>            
        </tr>        
    </table>
</template>

<style>
     table
        {
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }
        table td, table th
        {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }
        table thead th
        {
            background-color: #CCE8EB;
            width: 100px;
        }
        table tr:nth-child(odd)
        {
            background: #fff;
        }
        table tr:nth-child(even)
        {
            background: #F5FAFA;
        }
</style>
